import React, {PropTypes} from 'react';

import './style.scss';

const propTypes = {
	item: PropTypes.object,
	onSave: PropTypes.func.isRequired,
	onCancel: PropTypes.func.isRequired,
};

class  ItemEditLayer extends React.Component {
	render(){
		const {onSave, onCancel} = this.props;

		const it = this.props.item || {
			title: '',
			content: '',
		};

		let saveText = it.id ? 'edit' : 'add';

		let save = () => {
			onSave({
				...it,
				title: this.refs.title.value,
				content: this.refs.content.value,
			})
		}

		return (
			<div>
				<input ref="title" defaultValue={it.title} />
				<textarea ref="content" defaultValue={it.content} />
				<button onClick={save} >{saveText}</button>
				<button onClick={onCancel}>Cancel</button>
			</div>
			);
	}
}

ItemEditLayer.propTypes = propTypes;

export default ItemEditLayer;

